<template>
  <view class="wrapxxx">
    <CommonHeader></CommonHeader>
    <view class="bg">
      <view style="height: 300rpx;"></view>
      <view class="content-wrapper">
        <view class="top-base">
          <view class="base-info-wrapper">
            <view class="left-avatar-info">
              <view class="avatar">
                <image :src="getImageUrl(userInfo.avatar)" mode="aspectFill" />
              </view>
              <view class="desc-w">
                <view class="name ellipsis">{{ userInfo.username }}</view>
                <view class="contry-w">
                  <!-- <image src="/static/caigou/ru.png" />
                   myPersonPage -->
                   <flag class="mr-6 ml-20 mt-5" :country="userInfo.country" />
                  
                  <text v-if="identityType == 11 && userInfo.user_staff">{{  userInfo.user_staff.city.mergename }}</text>
                  <text >{{  userInfo.reg_address? userInfo.reg_address : userInfo.area_id.mergename }}</text>
                </view>
              </view>
            </view>
         
            <!-- 评分 -->
            <view class="evalue-f">
              <view class="ti">{{$t('评分')}}</view>
              <view class="txt">{{ userInfo.rating }}</view>
            </view>
          </view>
        
          <view class="profile" v-if="userInfo.user_staff && identityType == 11">
            {{$t('简介')}}：{{ userInfo.user_staff.content }}
          </view>
          <view class="profile" v-else>
            {{ userInfo.profile }}
          </view>
          <view class="profile-xxwra" v-if="userInfo.identity_type == 3 &&userInfo.category_name">
            {{$t('采购范围')}}：{{ userInfo.category_name }}
          </view>
          <view class="profile-xxwra" v-if="userInfo.identity_type == 9 &&userInfo.profile">
            {{$t('可承接的业务')}}：{{ userInfo.profile }}
          </view>
          <!-- 关注按钮 -->
          <view class="options-btns">
          <view class="left-statisc">
            <view class="icon">
              <view class="tl">{{ userInfo.release_count }}</view>
              <view class="attention">{{$t('发布')}}</view>
            </view>
            <view class="icon">
              <view class="tl">{{ userInfo.guanzhu_count }}</view>
              <view class="attention">{{$t('关注')}}</view>
            </view>
          </view>
          <view class="attentioxn"  @click="onCollection">{{ is_guanzhu == 1 ? $t('关注') : $t('取消关注') }}</view>
          </view>
     
        </view>
  
     


        <view class="profile-wra" v-if="licensList.length">
          <view class="title">{{$t('证件展示')}}</view>
          <view class="profile-uls">
            <view class="li" v-for="(item,index) in licensList" :key="index" @click="onPreview(item.fullurl)">
              <image
                :src="item.fullurl"
                mode="aspectFill"
              />
              <view>{{$t('营业执照')}}</view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 发起视频通话 -->
    <view class="btns">
      <view class="btn blue" @click="onCall">{{$t('发起视频通话')}}</view>
    </view>
  </view>
</template>



<script>
import { request_minute } from '@/api/basic'
import CommonHeader from 'pages/translate/components/common-header.vue';
import { getUserHomepage,isGuanZhu,userGuanZhu } from '@/api/app.js';
import { state_guanzhu } from '@/api/state.js';
import { isMessageGo } from '@/utils/tool.js';
export default {
  components: {
    CommonHeader,
  },
  data() {
    return {
      targetUserId: '',
      identityType: '',
      userInfo: {},
      is_guanzhu: 1, // 1未关注 2 已关注
      licensList: [],
    }
  },
  onLoad(options) {
    this.targetUserId = options.targetUserId;
    this.getData();
    this.getSeeGuanzhu();
  },  
  methods: {
    onPreview(current) {
      uni.previewImage({
        current,
        urls: [current]
      })
    },
    // 获取关注
    async getSeeGuanzhu() {
      try {
        let res = await isGuanZhu({
          user_id: uni.getStorageSync('user_id'),
          guanzhu_id: this.targetUserId,
          type: 1,
          release_type: 'user',
          group_id: '',
        })
        if (res.data.code == 1) {
          this.is_guanzhu = res.data.data;
        }
      } catch (error) {
        console.log(error)
      }
    },
    async onCollection() {
      try {
        let res = await userGuanZhu({
          user_id: uni.getStorageSync('user_id'),
          guanzhu_id: this.targetUserId,
          type: 1,
          release_type: 'user',
          group_id: ''
        })

        if (res.data.code == 1) {
          uni.showToast({
            title: this.is_guanzhu == 1 ? this.$t('关注成功') : this.$t('取消关注成功'),
            icon: 'none',
          })
          setTimeout(() => {
            this.getSeeGuanzhu();
            this.getData();
          }, 700);
        }
      } catch (error) {

      }
    },
    async getData() {
      // 3841 ||
      try {
        let res = await getUserHomepage({
          user_id:   this.targetUserId,
        });
        let userinfo = res.data.data.userInfo;
        this.userInfo = userinfo;
        // 登录类型
        this.identityType = userinfo.identity_type;

        // 营业执照
        let licenImg = [];
        userinfo.license_image2.forEach((ele)=> {
          licenImg.push({
            url: this.getImageUrl(ele),
            fullurl: this.getImageUrl(ele),
          })
        })
        this.licensList = licenImg;


      } catch (error) {
        console.log(error,'错误错误')
      }
      
    },
    onCall(info) {
      if(uni.getStorageSync("user_id") == this.targetUserId) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
			
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: this.targetUserId,
				}).then(res => {
				if (res.data.data.flag == 1) {
					this.isMessageGo({
						action: 'call',
						data: {
							userId: +this.targetUserId,
							type: res.data.data.type || 1,
						}
					})
         
				} else {
					uni.$u.toast('积分不足，请充值积分')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/vip/scorePoint',
						})
					}, 500)
				}
			})
    }

    
    }
  }
}

</script>



<style scoped lang="scss">
.wrapxxx {
  .bg {
    width: 100%;
    background: url('/static/gluzssxxx.png') no-repeat;
    background-size: 100% auto;
    height: 60vh;
    position: absolute;
    top: 0;

    .content-wrapper {
      background-color: #fff;
      border-top-left-radius: 24rpx;
      border-top-right-radius: 24rpx;
      .top-base {
        padding: 0 34rpx;
        .base-info-wrapper {
          display: flex;
          justify-content: space-between;
          .left-avatar-info {
            display: flex;

            .avatar {
              border: 4rpx solid #fff;
              border-radius: 50%;
              margin-right: 26rpx;
              position: relative;
              top: -24rpx;

              image {
                width: 140rpx;
                height: 140rpx;
                border-radius: 50%;
              }
            }

            .desc-w {
              flex: 1;
               padding-top: 24rpx;

              .name {
                color: #333;
                font-size: 40rpx;
                font-weight: 600;
                margin-bottom: 16rpx;
                max-width: 380rpx;
              }

              .contry-w {
                display: flex;
                align-items: center;

                image {
                  width: 28rpx;
                  height: 20rpx;
                  margin-right: 9rpx;
                }

                text {
                  color: #A2A2A2;
                  font-size: 22rpx;
                  font-weight: 400;
                }
              }
            }
          }

          .evalue-f {
            margin-top: 24rpx;
            border-radius: 14rpx;
            background: #FFF;
            box-shadow: 0px 2rpx 8.1rpx 0px rgba(149, 149, 149, 0.25);
            width: 94rpx;
            height: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .ti {
              color: #333;
              font-size: 18rpx;
              font-weight: 400;
              margin-bottom: 2rpx;
            }

            .txt {
              color: #333;
              font-size: 36rpx;
              font-weight: 600;
            }
          }
        }
        .profile {
          color: #333;
          font-size: 22rpx;
          line-height: 35rpx;
        }
        .options-btns {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 38rpx 0;
          .left-statisc {
            display: flex;
            align-items: center;
            .icon {
              margin-right: 40rpx;
              text-align: center;
              .tl {
                color: #333;
                font-size: 28rpx;
                font-weight: 600;
              }
              .attention {
                color: #9E9E9E;
                font-size: 20rpx;
                font-weight: 400;
              }
            }
          }
          .attentioxn {
            width: 162rpx;
            height: 50rpx;
            border-radius: 25rpx;
            background: #FF2442;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFF;
            font-size: 24rpx;
            font-weight: 500;
          }
        }
      }

      // {{$t('证件展示')}}
      .profile-wra {
        padding: 0 24rpx;
        border-top: 8rpx solid #F6F7FB;
        .title {
          padding-top: 34rpx;
          padding-bottom: 24rpx;
          padding-left: 24rpx;
         
        }
        .profile-uls {
          display: flex;
          align-items: center;
          .li {
            border-radius: 18rpx;
            background: #FFF;
            box-shadow: 0px 1px 4rpx 0px rgba(157, 157, 157, 0.25);
            padding: 24rpx;
            padding-bottom: 0;
            margin-right: 18rpx;
            &:nth-child(2n) {
              margin-right: 0;
            }
            image {
              width: 300rpx;
              height: 200rpx;
              border-radius: 16rpx;
            }
            view {
              color: #333;
              font-size: 24rpx;
              font-weight: 500;
              padding: 14rpx 0;
              text-align: center;
            }
          }
        }
      }

    }
  }
}


.btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    .btn {
      // width: 328rpx;
      width: 100%;
      height: 94rpx;
      border-radius: 18rpx;
      border: 2rpx solid rgba(241, 122, 3, 0.10);
      background: #06C36E;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      font-size: 32rpx;
      font-weight: 600;
      &.blue {
        background-color: #278AFF;
      }
    }
  }

  .profile-xxwra {
    font-size: 24rpx;
    color: #333;
    margin-top: 24rpx;
    line-height: 1.7em;
  }
</style>